<!-- eslint-disable @typescript-eslint/no-explicit-any -->
<script lang='ts' setup>
import { selectTypeSymbol, clickMenuItemSymbol, MenuItem } from './types'
import { Icon, addCollection } from '@iconify/vue'
import Mdi from '@iconify-json/mdi/icons.json'
import Mage from '@iconify-json/mage/icons.json'

addCollection(Mdi)
addCollection(Mage)

const props = withDefaults(defineProps<{
  title: string,
  icon?: string,
  checked?: boolean
  ext?: any
}>(), {
  checked: false,
  ext: null
})

const selectType = inject(selectTypeSymbol) || ref('radio')
const clickMenuItem = inject(clickMenuItemSymbol) ||((_: MenuItem): void => {})

const menuId = ref(`menu_id_`+crypto.randomUUID());

const emit = defineEmits<{
  clickMenuItem: [MenuItem]
}>()

function handleClickMenuItem():void {
   const data:MenuItem = {
    icon: props.icon,
    title: props.title,
    ext: props.ext
  }
  clickMenuItem(data)
  emit('clickMenuItem', data)
}

</script>

<template >
  <div class="menu-item__wrapper">
    <input :type="selectType" :checked="checked" name="menu_group" @click="handleClickMenuItem" style="display: none;" :id="menuId">
    <label class="menu-item" :for="menuId">
      <el-icon v-if="icon"  size="25">
        <Icon :icon="icon" />
      </el-icon>{{ title }}
    </label>
  </div>
</template>

<style scoped lang='less'>
input[type="radio"] + .menu-item{
  display: block;
  padding: 10px;
  background-color: #fff;
  margin: 10px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  align-items: center;
  cursor: pointer;
  gap: 5px;
}

input[type="radio"]:checked + .menu-item{
  background-color: var(--el-color-primary);
  color: #fff;
}
</style>
